<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>主页</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
</head>
<body>
<!--导入模板中的头部导航栏-->
<div th:replace="~{common::topbar(active='dashboard')}"></div>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">欢迎来到恩爱广场</h1>
        <p class="lead">美好的时刻值得被永远铭记</p>
    </div>
</div>
<!--首页推荐的恩爱说说-->
<div id="note-msg" class="card-columns" style="padding: 20px">
    <button type="button" class="btn btn-primary" id="btn-pull-msg">换一换</button>
</div>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:inline="javascript">
    $(function(){
        $("#btn-pull-msg").on('click',function (event) {
            $.ajax({
                type:"GET",
                url: "/note/pull",
                success: function(data) {
                    console.log(data)
                    //后端处理模板引擎，将抽取出的模板填充数据，并循环，然后在这里将处理好的html语言加入到对应的页面中！！！！！
                    //这里是重点！！！！！！
                    $("#note-msg").html(data);
                }
            });
        })
    })
</script>
</body>
</html>